<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>员工列表</title>
    <link href="${pageContext.request.contextPath }/dist/css/bootstrap.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/emp.css"/>
  </head>
  <body>
	
	<div class="container">
		<h1 class="text-center">员工列表</h1>
		<table class="table" >
			<thead>
				<tr>
					<th>员工ID</th>
					<th>姓名</th>
					<th>部门</th>
					<th>性别</th>
					<th>邮箱</th>
					<th>手机号</th>
					<th>入职时间</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="tbody">
				
				
			</tbody>
		</table>
		<div class="row">
			<div class="col-lg-9">
				<a class="btn btn-default" href="${pageContext.request.contextPath }/EmployeeAddJumpServlet">添加员工</a>
			</div>
			<div class="col-lg-3">
				<ul id="page">
					
				</ul>
			</div>
		</div>
	</div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="dist/js/bootstrap.js"></script>
    
    <!--第一步        使用AJAX获取数据  -->
    <script type="text/javascript">
    var pageNo=1;
    var pageSize=2;
    var pageCount=1;
    $.getJSON("EmployeeListServlet",{pageNo:pageNo,pageSize:pageSize},function(d){
    	
    	/* 第四步     更新总页数 */
    	pageCount=d.pageCount;
    	
    	
    	var str="";
    	for(var i=0;i<d.obj.length;i++){
    		str+="<tr>\r\n" + 
			"					<td>"+d.obj[i].empId+"</td>\r\n" + 
			"					<td>"+d.obj[i].empName+"</td>\r\n" + 
			"					<td>"+d.obj[i].department.deptName+"</td>\r\n" + 
			"					<td>"+(d.obj[i].gender==0?'女':'男')+"</td>\r\n" + 
			"					<td>"+d.obj[i].email+"</td>\r\n" + 
			"					<td>"+d.obj[i].phone+"</td>\r\n" + 
			"					<td>"+d.obj[i].hireDate+"</td>\r\n" + 
			"					<td>\r\n" + 
			"						<a onclick=\"if(confirm('是否删除?')){return true;}else{return false;}\" href=\"${pageContext.request.contextPath }/EmployeeDeleteServlet?empId="+d.obj[i].empId+"\">&nbsp;删除 >></a>\r\n" + 
			"						<a href=\"${pageContext.request.contextPath }/EmployeeUpdateJumpServlet?empId="+d.obj[i].empId+"\">&nbsp;&nbsp;更新 >></a>\r\n" + 
			"					</td>\r\n" + 
			"				</tr>";
			
    	}
    	
    	console.log(str);
    	//DOM操作   把拼好的字符串送到上面去
    	$("#tbody").html(str);
    	
    	
    	 /* 第三步     调用第二步的方法 */
        joinPage(pageNo,pageCount);
    	
    	
    	 /* 第六步     调用方法         类选择器             */
    	 currentPage(pageNo,".currentPage");
    	 
    	 
    	 /* 第八步      调用方法 */
    	 bindPage(pageNo,pageSize);
    	 
    	 
    });  
    
    
    /* 第七步                  给上一页/下一页/中间页绑定事件 */
    function bindPage(pageNo,pageSize){
    	
    	/* 绑定中间页 */
    	var cps=$(".currentPage");   //JQuery对象
    	for(var i=0;i<cps.length;i++){
    		$(cps[i]).click(function(){   // cps[i] DOM对象    给它转成JQuery对象
    			
    			pageNo=parseInt(this.innerHTML);    
    			$.getJSON("EmployeeListServlet",{pageNo:pageNo,pageSize:pageSize},function(d){

				pageCount=d.pageCount;
    		    	
    		    	
    		    	var str="";
    		    	for(var i=0;i<d.obj.length;i++){
    		    		str+="<tr>\r\n" + 
    					"					<td>"+d.obj[i].empId+"</td>\r\n" + 
    					"					<td>"+d.obj[i].empName+"</td>\r\n" + 
    					"					<td>"+d.obj[i].department.deptName+"</td>\r\n" + 
    					"					<td>"+(d.obj[i].gender==0?'女':'男')+"</td>\r\n" + 
    					"					<td>"+d.obj[i].email+"</td>\r\n" + 
    					"					<td>"+d.obj[i].phone+"</td>\r\n" + 
    					"					<td>"+d.obj[i].hireDate+"</td>\r\n" + 
    					"					<td>\r\n" + 
    					"						<a onclick=\"if(confirm('是否删除?')){return true;}else{return false;}\" href=\"${pageContext.request.contextPath }/EmployeeDeleteServlet?empId="+d.obj[i].empId+"\">&nbsp;删除 >></a>\r\n" + 
    					"						<a href=\"${pageContext.request.contextPath }/EmployeeUpdateJumpServlet?empId="+d.obj[i].empId+"\">&nbsp;&nbsp;更新 >></a>\r\n" + 
    					"					</td>\r\n" + 
    					"				</tr>";
    					
    		    	}
    		    	
    		    	console.log(str);
    		    	//DOM操作   把拼好的字符串送到上面去
    		    	$("#tbody").html(str);
    		    	
    		    	
    		    	 /* 第三步     调用第二步的方法 */
    		        joinPage(pageNo,pageCount);
    		    	
    		    	
    		    	 /* 第六步     调用方法         类选择器             */
    		    	 currentPage(pageNo,".currentPage");
    		    	 
    		    	 
    		    	 /* 第八步      调用方法 */
    		    	 bindPage(pageNo,pageSize);
    					
    				
    				
    			});
    		});
    	}
    	
    	
    	
    	
    	//绑定下一页
    	
    	$("#next").click(function(){
    		if(pageNo>=pageCount){
    			alert("已经是最后一页")
    		}else{
    			pageNo=pageNo+1;
    			
    			//向后台发送AJAX请求获取下一页数据      把第一步AJAX里面的内容全粘过来
    			$.getJSON("EmployeeListServlet",{pageNo:pageNo,pageSize:pageSize},function(d){
    				pageCount=d.pageCount;
    		    	
    		    	
    		    	var str="";
    		    	for(var i=0;i<d.obj.length;i++){
    		    		str+="<tr>\r\n" + 
    					"					<td>"+d.obj[i].empId+"</td>\r\n" + 
    					"					<td>"+d.obj[i].empName+"</td>\r\n" + 
    					"					<td>"+d.obj[i].department.deptName+"</td>\r\n" + 
    					"					<td>"+(d.obj[i].gender==0?'女':'男')+"</td>\r\n" + 
    					"					<td>"+d.obj[i].email+"</td>\r\n" + 
    					"					<td>"+d.obj[i].phone+"</td>\r\n" + 
    					"					<td>"+d.obj[i].hireDate+"</td>\r\n" + 
    					"					<td>\r\n" + 
    					"						<a onclick=\"if(confirm('是否删除?')){return true;}else{return false;}\" href=\"${pageContext.request.contextPath }/EmployeeDeleteServlet?empId="+d.obj[i].empId+"\">&nbsp;删除 >></a>\r\n" + 
    					"						<a href=\"${pageContext.request.contextPath }/EmployeeUpdateJumpServlet?empId="+d.obj[i].empId+"\">&nbsp;&nbsp;更新 >></a>\r\n" + 
    					"					</td>\r\n" + 
    					"				</tr>";
    					
    		    	}
    		    	
    		    	console.log(str);
    		    	//DOM操作   把拼好的字符串送到上面去
    		    	$("#tbody").html(str);
    		    	
    		    	
    		    	 /* 第三步     调用第二步的方法 */
    		        joinPage(pageNo,pageCount);
    		    	
    		    	
    		    	 /* 第六步     调用方法         类选择器             */
    		    	 currentPage(pageNo,".currentPage");
    		    	 
    		    	 
    		    	 /* 第八步      调用方法 */
    		    	 bindPage(pageNo,pageSize);
    				
    			});
    		}
    	
    	});
    	
    	//绑定上一页
    	
    	$("#pre").click(function(){
    		if(pageNo<=1){
    			alert("已经是第一页");
    		}else{
    			//有上一页
    			pageNo=pageNo-1;
    			//向后台发送AJAX请求获取上一页数据      把第一步AJAX里面的内容全粘过来
    			$.getJSON("EmployeeListServlet",{pageNo:pageNo,pageSize:pageSize},function(d){
    				pageCount=d.pageCount;
    		    	
    		    	
    		    	var str="";
    		    	for(var i=0;i<d.obj.length;i++){
    		    		str+="<tr>\r\n" + 
    					"					<td>"+d.obj[i].empId+"</td>\r\n" + 
    					"					<td>"+d.obj[i].empName+"</td>\r\n" + 
    					"					<td>"+d.obj[i].department.deptName+"</td>\r\n" + 
    					"					<td>"+(d.obj[i].gender==0?'女':'男')+"</td>\r\n" + 
    					"					<td>"+d.obj[i].email+"</td>\r\n" + 
    					"					<td>"+d.obj[i].phone+"</td>\r\n" + 
    					"					<td>"+d.obj[i].hireDate+"</td>\r\n" + 
    					"					<td>\r\n" + 
    					"						<a onclick=\"if(confirm('是否删除?')){return true;}else{return false;}\" href=\"${pageContext.request.contextPath }/EmployeeDeleteServlet?empId="+d.obj[i].empId+"\">&nbsp;删除 >></a>\r\n" + 
    					"						<a href=\"${pageContext.request.contextPath }/EmployeeUpdateJumpServlet?empId="+d.obj[i].empId+"\">&nbsp;&nbsp;更新 >></a>\r\n" + 
    					"					</td>\r\n" + 
    					"				</tr>";
    					
    		    	}
    		    	
    		    	console.log(str);
    		    	//DOM操作   把拼好的字符串送到上面去
    		    	$("#tbody").html(str);
    		    	
    		    	
    		    	 /* 第三步     调用第二步的方法 */
    		        joinPage(pageNo,pageCount);
    		    	
    		    	
    		    	 /* 第六步     调用方法         类选择器             */
    		    	 currentPage(pageNo,".currentPage");
    		    	 
    		    	 
    		    	 /* 第八步      调用方法 */
    		    	 bindPage(pageNo,pageSize);
    				
    			});
    		}
    		
    	});
    	
    	
    	
    	
    }
    
    
    
    
    
    
    
    
   /* 第五步         给当前页添加样式       class='currentPage'     currentPage参数     当前页的类   通过DOM查找所有的class  */
    function currentPage(pageNo,currentPage){
	   //获取所有中间页
	   var cps=$(currentPage);
	   for(var i=0;i<cps.length;i++){
		   //获取页码
		   var cp=cps[i].innerHTML;
		   if(pageNo==cp){
			  cps[i].style.cssText="color:red";
		   }
		   
	   }
	   
   }
    
    
    /*第二步         使用jS动态生成分页  */
    function joinPage(pageNo,pageCount){
    	
    	//上一页
    	var str="<li><a id='pre' href=\"#\">上一页</a></li>";
    	
    	//中间页
    	if(pageCount<=3){    //总页数小于3
    		for(var i=1;i<=pageCount;i++){
    			str+="<li><a class='currentPage'  href=\"#\">"+i+"</a></li>";
    		}
    		
    	}else{
    		if(pageNo<=3){   //当前页小于3
    			for(var i=1;i<=3;i++){
        			str+="<li><a class='currentPage'  href=\"#\">"+i+"</a></li>";
        		}
    		}else{      //当前页大于3
    			for(var i=pageNo-2;i<=pageNo;i++){
        			str+="<li><a class='currentPage' href=\"#\">"+i+"</a></li>";
        		}
    			
    			
    		}
    		
    		
    	}
    	
    	
    	
    	
    	//下一页
    	str+="<li><a id='next' href=\"#\">下一页</a></li>";
    	
    	//设置到分页地点
    	$("#page").html(str);
    }
    
    </script>
    
    
  </body>
</html>